<template>
  <div
    class="studentexpert"
    v-loading="pictLoading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
    element-loading-text="正在激活账号......"
  >
    <el-card>
      <!-- 顶部操作按钮 -->
      <div class="opt_wrap">
        <div class="opt_wrap_left">
          <p>
            已选中<span style="color: #1796EB">{{ selectedNum }}</span
            >项
          </p>
          <p
            v-if="
              showBtn &&
                selectedNum === 1 &&
                selectionCustomer &&
                selectionCustomer[0].student_status !== 'runaway'
            "
            @click="goToURL('studentInfo', 'edit', selectionCustomer[0].id)"
          >
            <i class="iconfont icon-fenpai"></i>
            编辑
          </p>
          <p v-if="showBtn" @click="showDelModal = true">
            <i class="iconfont icon-shanchu1"></i>
            删除
          </p>

          <p v-if="showBtn" @click="showActivate">
            <i class="iconfont icon-liushi"></i>
            激活账号
          </p>
        </div>
        <div class="opt_wrap_right">
          <p @click="importList" v-if="isShowImportFlag">
            <i class="iconfont icon-daoru1"></i>
            导入
          </p>
          <p @click="exportCustomer" v-if="isShowExportFlag">
            <i class="iconfont icon-daochu"></i>
            导出
          </p>
          <!-- <el-button type="text" @click="goToURL('customerDetails','create')">
                    <i class="iconfont icon-add"></i>
                    新建
                </el-button> -->
          <p class="add" @click="goToURL('studentInfo', 'create', '', 1)">
            <i
              class="iconfont icon-xinjian1"
              style="color: white; font-size: 12px; margin-right: 4px;"
            ></i>
            新建
          </p>
        </div>
      </div>

      <!-- tag标签 -->
      <statisticsTag :data="statisticsTagData" @searchStatus="searchStatus" />

      <!-- 搜索框 -->
      <div class="search_wrap">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-input
              placeholder="学员姓名/学员编号/学员手机号"
              v-model="searchCondition"
              clearable
              style="width: 100%"
              @keyup.enter.native="queryListData"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              v-model="queryDate"
              @change="queryListData"
              type="daterange"
              range-separator="~"
              start-placeholder="注册日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="classroom_id"
              placeholder="班级名称"
              @change="queryListData"
              filterable
              clearable
            >
              <el-option
                v-for="item in classroomList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              v-model="intention"
              placeholder="全部级别"
              @change="queryListData"
              filterable
              clearable
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="showURLdialogModel"
              >查看EPT测试连接</el-button
            >
          </el-col>
        </el-row>
      </div>

      <!-- tab -->
      <div class="table_list">
        <el-table
          ref="studentTable"
          :data="tableListData"
          min-height="500"
          border
          v-loading="loading"
          @selection-change="handleSelectionStudent"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="40" />
          <el-table-column label="学员编号" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.sno }}</p>
            </template>
          </el-table-column>
          <el-table-column label="测试级别" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.pt_level }}</p>
            </template>
          </el-table-column>
          <el-table-column label="当前级别" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.initial_level }}</p>
            </template>
          </el-table-column>
          <el-table-column label="学员姓名" align="center">
            <template slot-scope="scope">
              <p
                class="see_detail"
                @click="goToURL('studentInfo', 'details', scope.row.id)"
              >
                {{ scope.row.name }}
              </p>
            </template>
          </el-table-column>

          <el-table-column
            v-for="(item, index) in tableCaption"
            :key="index"
            :label="item.label"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.value] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.dyned_id === '0'"
                type="text"
                size="small"
                circle
                @click="activateStudent(scope.row.id)"
                >激活账号</el-button
              >
              <el-button
                v-else
                type="text"
                size="small"
                circle
                @click="goToURL('studentInfo', 'details', scope.row.id)"
                >查看学习进度</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <link-pagination
          :total="total"
          :currentPage="currentPage"
          :limit="limit"
          v-if="total != 0"
          @pagination="getPaginationParams"
        ></link-pagination>
      </div>
    </el-card>

    <!-- 对话框 -->
    <div>
      <!-- 显示链接对话框 -->
      <el-dialog
        title="链接地址:"
        width="510px"
        :visible.sync="showURLdialog"
        class="del_modal"
      >
        <div class="content">
          {{ `http://gaoxiao.jingqiweb.com/#/testrole?center_id=${center_id}` }}
          <el-button
            type="text"
            v-clipboard:copy="testroleURL"
            v-clipboard:success="copyUrl"
            >复制地址</el-button
          >
        </div>
        <div class="btn">
          <el-button @click="showURLdialog = false">返回</el-button>
          <el-button type="primary" @click="showURLdialog = false"
            >确认</el-button
          >
        </div>
      </el-dialog>

      <!-- 删除对话框 -->
      <el-dialog
        title="提示"
        width="510px"
        :visible.sync="showDelModal"
        class="del_modal"
      >
        <div class="content">
          <p><i class="iconfont icon-tishi"></i></p>
          <p v-if="selectionCustomer.length === 1">
            是否将学员<span>{{ selectionCustomer[0].name }}删除？</span>
          </p>
          <p v-if="selectionCustomer.length > 1">
            是否将<span
              >{{ selectionCustomer[0].name }}、{{ selectionCustomer[1].name
              }}<span v-if="selectionCustomer.length > 2">等</span>、{{
                selectionCustomer.length
              }}位学员删除？</span
            >
          </p>
          <p>删除成功之后，该操作将无法恢复</p>
        </div>
        <div class="btn">
          <el-button @click="showDelModal = false">返回</el-button>
          <el-button type="primary" @click="confirmDelete">确认</el-button>
        </div>
      </el-dialog>

      <!-- 激活学员 -->
      <el-dialog
        title="激活学员"
        width="510px"
        :visible.sync="showActivateModal"
        class="activate_modal"
        @closed="closeActivateModal()"
      >
        <div class="content" v-if="!showActivateTable">
          <p><i class="iconfont icon-tishi"></i></p>
          <p v-if="selectionCustomer.length === 1">
            是否激活学员<span>{{ selectionCustomer[0].name }}？</span>
          </p>
          <p v-if="selectionCustomer.length > 1">
            是否激活<span
              >{{ selectionCustomer[0].name }}、{{ selectionCustomer[1].name
              }}<span v-if="selectionCustomer.length > 2">等</span>、{{
                selectionCustomer.length
              }}位学员？</span
            >
          </p>
        </div>
        <el-row class="table" v-if="showActivateTable">
          <div style="margin: 0 33% 10px;"><h3>以下学员激活失败</h3></div>
          <el-table :data="activateFalseData" stripe style="width: 100%" border>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="mobile" label="电话" align="center">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" align="center">
            </el-table-column>
            <el-table-column prop="error" label="失败原因" align="center">
            </el-table-column>
          </el-table>
        </el-row>
        <div class="btn">
          <el-button @click="showActivateModal = false">返回</el-button>
          <el-button
            type="primary"
            @click="confirmActivate"
            v-if="!showActivateTable"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <!-- 导入学员信息 -->
      <el-dialog
        title="导入学员信息"
        width="640px"
        :visible.sync="importModal"
        @closed="closeImportModal()"
      >
        <div class="excelContent">
          <el-steps :active="active" finish-status="success">
            <el-step title="上传文档"></el-step>
            <el-step title="导入数据"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
          <div v-if="active !== 3">
            <p>一、请按照数据模板的格式准备要导入的数据。</p>
            <!-- <p @click="downloadExcel" style="color: #222; cursor: pointer;">
              下载数据模板
            </p> -->
            <el-button
              class="downloadBtn"
              style="margin-left: 20px"
              icon="el-icon-download"
              type="text"
              size="small"
              circle
              @click="downloadExcel"
              >下载数据模板</el-button
            >
            <p>
              <span>注意事项：</span><br />
              1.表格首行字段名，不能删除。<br />
              2.字段标“必填”字段，请务必填写。<br />
            </p>
            <p>二、请选择需要导入的XLSX文件。</p>
            <p>单个文件不得大于1M</p>
            <el-upload
              class="upload-demo"
              :action="uploadStudentExcelURl"
              :headers="headers"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :on-progress="progressUpload"
              :file-list="fileList"
              style="padding-left: 30px; margin-bottom: 30px;"
            >
              <el-button size="small" type="primary">导入文件</el-button>
            </el-upload>
          </div>
          <div
            v-if="active === 3"
            style="display: flex;flex-direction: column;align-items: center;"
          >
            <p v-if="!isUpload">
              <i
                class="iconfont importIcon"
                style="font-size: 80px; color: #0182D9"
              ></i>
            </p>
            <p style="padding: 0px;">导入完成</p>
            <div v-if="isUpload">
              <span style="margin: 0 28%;"
                >以下学员导入失败，请修改后重新导入</span
              >
              <el-table :data="noEpt" style="width: 100%" border stripe>
                <el-table-column prop="name" label="学员姓名" align="center">
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="学员电话"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="email"
                  label="学员邮箱"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="error"
                  label="失败原因"
                  width="140"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { uploadStudentExcelURl, downloadStudentExcelURL } from "@/utils/url";
import statisticsTag from "@/components/statisticsTag";
import http from "@/api/student";
import httpDyned from "@/api/dyned";
import httpglobal from "@/api/global";
import { changeTitleMinin, deleteMixin, paginationMixin } from "@/mixin";
import { formatDate, formatArray } from "@/utils";
export default {
  name: "studentexpert",
  mixins: [changeTitleMinin, deleteMixin, paginationMixin],
  data() {
    return {
      // ---
      classroomList: [],
      classroom_id: null,
      isShowExportFlag: true,
      isShowImportFlag: true,
      degree_id: 1,
      showActivateTable: false,
      pictLoading: false,
      activateFalseData: [],
      testroleURL: "",
      center_id: "",
      showURLdialog: false,
      isUpload: false,
      noEpt: [],
      active: 1,
      headers: null,
      uploadStudentExcelURl,
      downloadStudentExcelURL,
      fileList: [],
      student_status: null,
      statisticsTagData: [
        {
          label: "全部学员",
          total: 0,
          status: "",
          icon: "icon-banjiguanli2",
          backgroundStart: "#17B5EB",
          backgroundEnd: "#1797EB"
        },
        {
          label: "已激活账号",
          total: 0,
          status: "1",
          icon: "icon-zaixiaoxueyuan",
          backgroundStart: "#02c779",
          backgroundEnd: "#02c765"
        },
        {
          label: "未激活账号",
          total: 0,
          status: "0",
          icon: "icon-jiarubanji",
          backgroundStart: "#F27450",
          backgroundEnd: "#F25751"
        }
      ],
      selectionCustomer: [],
      selectedNum: 0,
      showBtn: false,
      showDelModal: false,
      showActivateModal: false,
      status: "",
      // ---
      tableListData: [],
      tableCaption: [],
      loading: false,
      rules: {
        name: [{ required: true, message: "请填写姓名" }],
        email: [
          { required: true, message: "请填写邮箱" },
          {
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: "邮箱填写有误",
            trigger: "blur"
          }
        ],
        phone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式有误",
            trigger: "blur"
          }
        ]
      },
      searchCondition: null,
      queryDate: null,
      delNiche: null,
      levelList: [],
      intention: null,
      importModal: false
    };
  },
  components: {
    statisticsTag
  },
  methods: {
    //复制地址
    copyUrl(url) {
      this.$message.success("复制成功");
    },
    showURLdialogModel() {
      this.testroleURL = `http://gaoxiao.jingqiweb.com/#/testrole?center_id=${this.center_id}`;
      this.showURLdialog = true;
    },
    beforeUpload(file) {
      console.log(file);
      const fileType =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!fileType) {
        this.$message.error("导入文件只能是XLSX格式!");
      }
      if (!isLt1M) {
        this.$message.error("导入文件小于1M！");
      }
      return fileType;
    },
    progressUpload() {
      this.active = 2;
    },
    handleSuccess(res) {
      this.$message.success("导入文件成功！");
      console.log("res.no_ept", res.no_ept.length);
      if (res.no_ept.length) {
        this.isUpload = true;
        this.noEpt = res.no_ept;
        this.active = 3;
        console.log("this.isUpload", this.isUpload);
      } else {
        this.active = 3;
        console.log("this.isUpload", this.isUpload);
      }
    },
    closeImportModal() {
      this.isUpload = false;
      this.noEpt = [];
    },
    // 下载模板
    downloadExcel() {
      window.open(
        "http://gaoxiaocrm.oss-cn-hangzhou.aliyuncs.com/excel/student.xlsx"
      );
    },
    // 导入数据
    importList() {
      this.importModal = true;
      this.active = 1;
    },
    // 激活
    showActivate() {
      this.showActivateModal = true;
    },
    // 批量激活学员
    confirmActivate() {
      let user_id = this.delNiche;
      console.log("user_id", user_id);
      this.$message.info("激活学员中,请稍等...");
      this.pictLoading = true;
      this.showActivateModal = false;
      httpDyned
        .createContent({ user_id })
        .then(res => {
          console.log("res.data.length", res.data.length);
          if (res.data.length === 0) {
            this.pictLoading = false;
            this.$message.success("激活学员成功");
            this.getListData();
          } else {
            this.pictLoading = false;
            // this.$message.success("激活学员成功");
            this.activateFalseData = res.data;
            this.showActivateTable = true;
            this.showActivateModal = true;
            user_id = [];
            this.getListData();
          }
        })
        .catch(err => {
          this.pictLoading = false;
        });
    },
    // 激活学员对话框的关闭事件
    closeActivateModal() {
      this.showActivateModal = false;
      this.showActivateTable = false;
      this.activateFalseData = [];
    },
    // 激活单个
    activateStudent(id) {
      this.$confirm("是否激活当前学员?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.pictLoading = true;
          console.log("pictLoading", this.pictLoading);
          this.$message.info("激活学员中,请稍等...");
          httpDyned.createContent({ user_id: id }).then(res => {
            if (res.data.length === 0) {
              this.pictLoading = false;
              this.$message.success("激活学员成功");
              this.getListData();
            } else {
              this.pictLoading = false;
              let msg = res.data[0].error;
              this.$message.error(msg);
              this.getListData();
            }
          });
        })
        .catch(() => {
          this.$message.info("取消激活操作");
        });
    },
    // 导出学员
    exportCustomer() {
      let token = sessionStorage.getItem("access_token");
      let create_time_start = "";
      let create_time_end = "";
      if (this.queryDate) {
        create_time_start = formatDate.toStr(
          new Date(this.queryDate[0]),
          "YYYY-MM-DD"
        );
        create_time_end = formatDate.toStr(
          new Date(this.queryDate[1]),
          "YYYY-MM-DD"
        );
      }
      if (this.searchCondition) {
        this.searchCondition = this.searchCondition;
      } else {
        this.searchCondition = "";
      }
      if (this.student_status) {
        this.student_status = this.student_status;
      } else {
        this.student_status = "";
      }
      if (this.intention) {
        this.intention = this.intention;
      } else {
        this.intention = "";
      }
      let config = `token=${token}&search=${this.searchCondition}&dyned_id=${this.student_status}&level=${this.intention}&create_time_start=${create_time_start}&create_time_end=${create_time_end}&degree_id=${this.degree_id}`;
      // console.log(`http://webi-dev.jingqiweb.com/api.php/center/customer/export_excel?${config}`)
      window.open(`${this.downloadStudentExcelURL}?${config}`);
    },
    // 删除对话框确认
    confirmDelete() {
      let id = this.delNiche;
      http.deleteContent({ id }).then(res => {
        this.$message.success(res.msg || "删除成功");
        this.showDelModal = false;
        this.getListData();
      });
    },
    goToURL(name, pageType, id, degreeType) {
      this.$router.push({ name, params: { pageType, id, degreeType } });
    },
    goToURL2(name, pageType, id) {
      this.$router.push({ name, query: { pageType, id } });
    },
    // 搜索框事件
    queryListData() {
      this.getListData();
    },
    // tag标签绑定的搜索事件
    searchStatus(status) {
      this.student_status = status;
      this.getListData();
      console.log("status:", status);
    },
    // 页面加载获取数据
    getListData(
      page = this.currentPage,
      list_rows = this.limit,
      degree_id = this.degree_id,
      search = this.searchCondition,
      dyned_id = this.student_status,
      level = this.intention,
      classroom_id = this.classroom_id
    ) {
      this.loading = true;
      let params = {
        page,
        list_rows,
        search,
        dyned_id,
        level,
        degree_id,
        classroom_id
      };
      if (this.queryDate) {
        params["create_time_start"] = formatDate.toStr(
          new Date(this.queryDate[0]),
          "YYYY-MM-DD"
        );
        params["create_time_end"] = formatDate.toStr(
          new Date(this.queryDate[1]),
          "YYYY-MM-DD"
        );
      }
      http.getList(params).then(res => {
        this.statisticsTagData.map(item => {
          if (item.label === "全部学员") {
            item.total = res.count.all;
          }
          if (item.label === "已激活账号") {
            item.total = res.count.yes;
          }
          if (item.label === "未激活账号") {
            item.total = res.count.no;
          }
        });
        console.log("res", res);
        this.loading = false;
        this.total = res.data.total;
        this.tableCaption = [
          {
            label: "学员手机号",
            value: "mobile"
          },
          {
            label: "学员邮箱",
            value: "email"
          },
          {
            label: "有效期",
            value: "end_date"
          },
          {
            label: "班级",
            value: "classroom"
          },
          {
            label: "负责人",
            value: "teacher"
          },
          {
            label: "创建时间",
            value: "create_time"
          }
        ];
        let tableListData = res.data.data;
        if (tableListData.length) {
          tableListData.map(item => {
            item.classroom = item.classroom.roomname;
            item.teacher = item.teacher.name;
          });
        }
        console.log("tableListData", tableListData);
        this.tableListData = tableListData;
      });
    },
    // tab表单第一列选中事件
    handleSelectionStudent(val) {
      this.selectionCustomer = val;
      console.log(val);
      this.selectedNum = this.selectionCustomer.length;
      if (this.selectedNum === 0) {
        this.showBtn = false;
      } else {
        this.showBtn = true;
      }
      if (this.selectionCustomer.length !== 0) {
        this.delNiche = [];
        for (let item of this.selectionCustomer) {
          this.delNiche.push(item.id);
          // this.delNiche.push({ user_id: item.id});
        }
      }
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      let user = JSON.parse(sessionStorage.getItem("user"));
      this.center_id = user.center_id;
      this.levelList = formatArray(basicConfig.user_level);
      // 控制是否显示导入导出
      var a = "import";
      var b = "export";
      if (user.role_id === 1) {
        return false;
      } else {
        if (user.rules.indexOf(a) === -1) {
          this.isShowImportFlag = false;
        }
        if (user.rules.indexOf(b) === -1) {
          this.isShowExportFlag = false;
        }
      }
    },
    getClassroomList() {
      httpglobal.getClassRoomList({ degree_id: this.degree_id }).then(res => {
        this.classroomList = res.data;
      });
    }
  },
  created() {
    this.init();
    this.getClassroomList();
    this.getListData();
  },
  mounted() {
    this.headers = {
      token: sessionStorage.getItem("access_token")
    };
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/listPage.scss";

.studentexpert {
  // height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
  .flag {
    padding: 0px 5px;
    background: #c6c7c9;
    color: #fff;
    border-radius: 14px;
  }
  .opt_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
    &_left {
      display: flex;
      p {
        margin-right: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
        &:nth-of-type(1) {
          cursor: default;
          color: #646464;
          &:hover {
            color: #646464;
          }
        }
      }
    }
    &_right {
      display: flex;
      align-items: center;
      p {
        margin-left: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
      .add {
        width: 72px;
        height: 30px;
        background: linear-gradient(top left, #17b5eb, #1796eb);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        &:hover {
          color: white;
        }
      }
    }
  }
  .search_wrap {
    margin: 20px 0;
    div {
      //   margin-right: 17px;
    }
  }
  .see_detail {
    cursor: pointer;
    color: #1796eb;
  }
  .del_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
  .excelContent {
    & > div {
      padding: 0 50px;
      p {
        color: #999;
        font-size: 14px;
        &:nth-of-type(1) {
          margin-top: 30px;
          margin-bottom: 8px;
          font-weight: 600;
        }
        &:nth-of-type(2) {
          padding-left: 30px;
          margin-bottom: 18px;
        }
        &:nth-of-type(3) {
          padding-left: 30px;
          background: #f5f5f5;
          line-height: 20px;
          padding: 16px 0 16px 20px;
          border-radius: 10px;
          margin-bottom: 30px;
        }
        &:nth-of-type(4) {
          font-weight: 600;
        }
        &:nth-of-type(5) {
          color: #b2b2b2;
          padding-left: 30px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
  .activate_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .search_teacher {
        /deep/ .el-input {
          width: 440px;
        }
      }
      .radio {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-height: 120px;
        overflow-y: auto;
        div {
          width: 50%;
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
      .check {
        .teacher_checkbox_group {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          max-height: 120px;
          overflow-y: auto;
          /deep/ .el-checkbox {
            margin-right: 0;
          }
          .teacher_checkbox {
            width: 50%;
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
  .importIcon {
    display: block;
    width: 80px;
    height: 80px;
    background: url("~@/assets/images/import.png") no-repeat;
    background-size: 80px 80px;
  }
}
</style>
